<template>
	<form class="form" @submit="sub">
		<view class="form-item">
			<view class="form-title">
				<view class="label">
					<text class="red">*</text>
					服务时间
				</view>
			</view>
			<view class="form-control form-time" @click="openTimeLayer">
				<view>{{ serverData.subData.worktimestart }}</view>
				<view>-</view>
				<view>{{ serverData.subData.worktimeend }}</view>
				<input class="input input-none" v-model="serverData.subData.worktimestart" type="text" name="worktimestart" placeholder-class="placeholderStyle" />
				<input class="input input-none" v-model="serverData.subData.worktimeend" type="text" name="worktimeend" placeholder-class="placeholderStyle" />
			</view>
			<view class="tips">*我们将在您设置的服务时间内将您推荐展示给客户</view>
		</view>
		<view class="form-item form-common-item">
			<view class="form-title" @click="getMaxClassListRequest">
				<view class="label">
					<text class="red">*</text>
					所在行业
				</view>
				<view class="value">
					<text>选择</text>
					<icon class="iconfont icon">&#xe7d3;</icon>
				</view>
			</view>
			<view class="form-control form-common-control">
				<view class="type-item" v-for="(item, index) in serverData.serverTradeData" :key="index">{{ item.name }}</view>
				<input class="input input-none" v-model="serverData.subData.trade" type="text" placeholder="请选择服务时间" name="trade" placeholder-class="placeholderStyle" />
			</view>
			<view class="tips">*选择您所在的行业，用于匹配或展示</view>
		</view>
		<view class="form-item form-common-item">
			<view class="form-title" @click="getSortListRequest">
				<view class="label">
					<text class="red">*</text>
					服务分类
				</view>
				<view class="value">
					<text>选择</text>
					<icon class="iconfont icon">&#xe7d3;</icon>
				</view>
			</view>
			<view class="form-control form-common-control">
				<view class="type-item" v-for="(item, index) in serverData.serverTypeData" :key="index">{{ item.name }}</view>
				<input
					class="input input-none"
					v-model="serverData.subData.classify"
					type="text"
					placeholder="请选择服务时间"
					name="classify"
					placeholder-class="placeholderStyle"
				/>
			</view>
			<view class="tips">
				*选择您的服务分类，用于匹配或展示
				<navigator class="gl" :url="serverTypetUrl">攻略</navigator>
			</view>
		</view>
		<view class="form-item form-common-item">
			<view class="form-title" @click="openKeyWordLayer">
				<view class="label">服务关键词</view>
				<view class="value">
					<text>添加</text>
					<icon class="iconfont icon">&#xe71e;</icon>
				</view>
			</view>
			<view class="form-control form-common-control">
				<view class="type-item" v-for="(item, index) in serverData.serverKeyWordData" :key="index">{{ item }}</view>
				<input class="input input-none" v-model="serverData.subData.labels" type="text" placeholder="请选择服务时间" name="labels" placeholder-class="placeholderStyle" />
			</view>
			<view class="tips">
				*为您匹配更精准的客户
				<navigator class="gl" :url="serverKeyWordUrl">攻略</navigator>
			</view>
		</view>
		<view class="form-submit">
			<view class="agreement">
				<text>开通即表示已阅读并接受</text>
				<navigator class="nav" url="/subpages/richtext/richtext?type=merchantAgreement">商户服务协议</navigator>
			</view>
			<button class="btn btn-sub" form-type="submit" hover-class="btnClickStyle">免费开通</button>
		</view>
	</form>
	<server-time ref="serverTimeRef" @timeLayerCallback="timeLayerCallback"></server-time>
	<server-trade-type ref="serverTradeTypeRef" @tradeLayerCallback="tradeLayerCallback" @typeLayerCallback="typeLayerCallback"></server-trade-type>
	<server-key-word ref="serverKeyWordRef" @keyWordLayerCallback="keyWordLayerCallback"></server-key-word>
</template>

<script setup>
import { ref, reactive, computed,defineComponent } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import config from '@/uni.config.js';
import { valid } from '@/subpages/common/utils/valid.js';
import { showModal, showCopy } from '@/common/hooks/useShow.js';
import serverTime from '../../set/components/server-time.vue';
import serverTradeType from '../../set/components/server-trade-type.vue';
import serverKeyWord from '../../set/components/server-keyword.vue';
import { getMaxClassList, getSortList } from '@/subpages/common/api/set.js';
import { applyBusiness } from '@/subpages/common/api/open.js';
import { useStore } from 'vuex'; 

const serverTypetUrl = computed(() => {
	return `/subpages/web/web?url=${encodeURIComponent(config.article.serverType)}`;
});
const serverKeyWordUrl = computed(() => {
	return `/subpages/web/web?url=${encodeURIComponent(config.article.serverKeyWord)}`;
});


const store = useStore(); 
const serverTimeRef = ref(null);
const serverTradeTypeRef = ref(null);
const serverKeyWordRef = ref(null);

const serverData = reactive({
	subData: {
		worktimestart: '9:00', //开始时间
		worktimeend: '18:00', //结束时间
		trade: '', //行业
		classify: '', //分类
		labels: '' //关键词
	},
	serverTradeData: [],
	serverTypeData: [],
	serverKeyWordData: []
});
const propsData = defineProps({
	dataSubData: Object,
	baseData: Object
});
defineComponent({
	serverTime,
	serverTradeType,
	serverKeyWord
});
//打开时间选择弹窗
function openTimeLayer() {
	serverTimeRef.value.open(serverData.subData.worktimestart, serverData.subData.worktimeend, '2');
}
//打开服务行业弹窗
async function getMaxClassListRequest() {
	const res = await getMaxClassList();
	openTradeLayer(res.data.data, '1', serverData.serverTradeData);
}
//打开服务行业弹窗
async function getSortListRequest() {
	const res = await getSortList();
	openTradeLayer(res.data.data, '2', serverData.serverTypeData);
}
//打开关键词弹窗
function openKeyWordLayer() {
	serverKeyWordRef.value.open(serverData.serverKeyWordData);
}
//打开服务分类、服务行业弹窗
function openTradeLayer(data, type, orient) {
	serverTradeTypeRef.value.open(data, type, orient);
}
//时间回调
function timeLayerCallback(callbackData) {
	serverData.subData.worktimestart = callbackData.worktimestart;
	serverData.subData.worktimeend = callbackData.worktimeend;
	serverTimeRef.value.close();
}
//服务行业回调
function tradeLayerCallback(callbackData) {
	serverData.serverTradeData = callbackData.text;
	serverData.subData.trade = callbackData.id;
	serverTradeTypeRef.value.close();
}
//服务分类回调
function typeLayerCallback(callbackData) {
	serverData.serverTypeData = callbackData.text;
	serverData.subData.classify = callbackData.id;
	serverTradeTypeRef.value.close();
}
//关键词回调
function keyWordLayerCallback(callbackData) {
	serverData.serverKeyWordData = callbackData;
	serverData.subData.labels = callbackData.join(',');
	serverKeyWordRef.value.close();
}
function sub(e) {
	let rules = [
		{
			value: e.detail.value.worktimestart,
			null: '请选择服务时间',
			error: '请选择服务时间'
		},
		{
			value: e.detail.value.worktimeend,
			null: '请选择服务时间',
			error: '请选择服务时间'
		},
		{
			value: e.detail.value.trade,
			null: '请选择所在行业',
			error: '请选择所在行业'
		},
		{
			value: e.detail.value.classify,
			null: '请选择服务分类',
			error: '请选择服务分类'
		}
	];

	const dataTypes = { dataTypes: {}, tip: 1 };
	valid(rules, dataTypes).then(res => {
		let pushObj = { ...serverData.subData, ...propsData.dataSubData };
		applyBusinessRequest(pushObj);
	});
}
//提交请求
async function applyBusinessRequest(data) {
	const res = await applyBusiness(data);
	store.dispatch('app/init'); 
	store.commit('user/SET_ROLE', 'merchant');
	successLayer();
}
//提交成功弹窗
function successLayer() {
	showModal({
		title: '提示',
		content: propsData.baseData.rqcode === 1 ? '预计2个工作日内完成审核,关注微信公众号，客户消息不错过' : `预计2个工作日内完成审核进QQ群了解更多：${config.customer.qq_group}`,
		confirmText: propsData.baseData.rqcode === 1 ? '去关注' : '个人中心',
		cancelText: '取消',
		showCancel: propsData.baseData.rqcode === 1 ? false : true,
		confirm() {
			if (propsData.baseData.rqcode === 1) {
				uni.navigateTo({
					url: `/subpages/web/web?url=${encodeURIComponent(config.article.public)}`
				});
			} else {
				uni.switchTab({
					url: '/pages/mine/mine'
				});
			}
		},
		cancel() {
			// showCopy({
			// 	data: config.customer.qq_group,
			// 	type: 1,
			// 	icon: 'none',
			// 	title: '已复制'
			// });
			// setTimeout(() => {
			uni.navigateBack();
			// }, 1000);
		}
	});
}
</script>

<style lang="scss">
@import '@/common/css/base.scss';
page {
	background-color: $bgColor;
}
</style>
<style scoped lang="scss">
@import '@/common/css/base.scss';
@import '@/common/css/form.scss';
.form {
	padding-bottom: 200rpx;
	border-radius: 16rpx;
	overflow: hidden;
	.input-none {
		display: none;
	}
	.form-time {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 40rpx 100rpx;
		color: #666;
	}
	.form-common-item {
		.form-common-control {
			display: block;
			padding: 40rpx 0;
			.type-item {
				display: inline-block;
				margin: 0 12rpx 12rpx 0;
				padding: 0 20rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				background: #f5f5f5;
				color: #666;
				font-size: 24rpx;
				border-radius: 28rpx;
			}
		}
		.value {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			.icon {
				position: relative;
				top: 3rpx;
				font-size: 28rpx;
			}
		}
	}
	.tips {
		display: block;
		padding: 0 0 28rpx 0;
		font-size: 24rpx;
		color: #aaaaaa;
		.gl {
			display: inline-block;
			text-decoration: underline;
		}
	}
}
</style>
